<template>
	<el-form :model="form" style="width: 80%;">
		<el-form-item label="标准名称">
			<el-input v-model="form.name" />
		</el-form-item>

	</el-form>
	<el-upload action="#" :limit="1" :auto-upload="false" :on-change="handleChange">
		<template #trigger>
			<el-button type="primary">选择文件</el-button>
		</template>
		<template #default>
			<el-button type="primary" @click="uploadBtn" style="margin-left:10px;">确定上传</el-button>
		</template>
		<template #tip>
			<div class="el-upload__tip" style="color:grey;">
				仅可上传一个pdf文件
			</div>
		</template>
	</el-upload>
	<el-button type="primary" @click="dialogVisible = true" v-show="done">查看标准详情</el-button>

	<el-dialog v-model="dialogVisible" :title="form.name" style="width: 90%;height:1200px;" @opened="child.echartsInit()">
		<Echart :data="data" ref="child" />
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="dialogVisible = false">
					确认
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>
  
 
<script setup>
import { reactive, ref } from 'vue';
import Api from '../../util/axios_s';
import Echart from '../../components/Echart.vue'

const fileUpload = ref()
const form = reactive({
	name: ''
})
const done = ref(false)

// 选择文件时被调用，将他赋值给fileUpload
const handleChange = (file) => {
	fileUpload.value = file
}

const child = ref(null)
const data = ref()
// 确定上传
const uploadBtn = () => {
	let param = new FormData()
	// 如果是多个文件数组就循环添加一下就ok了
	console.log(fileUpload);

	param.append("file", fileUpload.value.raw)
	param.append("name", form.name)
	Api.post("upload", param, { 'headers': { 'Content-Type': 'multipart/form-data' } }).then((res) => {
		console.log(res)
		if (res.status) {
			Api.post("get_json", {
				"type": "get_one",
				"name": form.name + '元数据'
			}).then((res) => {
				console.log(JSON.parse(res.data))
				done.value = true
				data.value = JSON.parse(JSON.parse(res.data))
			})
		}
	})

}

const dialogVisible = ref(false)
</script>